<template>
  <div class="addBox">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="栏目名称" prop="columnName" label-width="200px">
        <el-input v-model="ruleForm.columnName"></el-input>
      </el-form-item>
      <el-form-item label="栏目路径" prop="columnPath" label-width="200px">
        <el-input v-model="ruleForm.columnPath"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="columnSort" label-width="200px">
        <el-input v-model.number="ruleForm.columnSort"></el-input>
      </el-form-item>
      <el-form-item
        label="栏目关键字(keywords)"
        prop="columnKeyword"
        label-width="200px"
      >
        <el-input v-model="ruleForm.columnKeyword"></el-input>
      </el-form-item>
      <el-form-item
        label="栏目简介(description)"
        prop="columnIntroduction"
        label-width="200px"
      >
        <el-input type="textarea" v-model="ruleForm.columnIntroduction"></el-input>
      </el-form-item>
      <el-form-item label="在导航中显示" prop="columnState" label-width="200px">
        <el-radio-group v-model="ruleForm.columnState">
          <el-radio label="显示"></el-radio>
          <el-radio label="不显示"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="栏目类型" prop="columnType" label-width="200px">
        <el-radio-group v-model="ruleForm.columnType">
          <el-radio label="列表栏目"></el-radio>
          <el-radio label="文章栏目"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// {{$route.params.rowId}}
export default {
  data() {
    return {
      ruleForm: {
        columnName: "",
        columnPath: "",
        columnSort: "",
        columnState: "",
        columnIntroduction: "",
        columnType: 1,
        columnKeyword: ''
      },
      rules: {
        columnName: [{ required: true, message: "请输入栏目名称", trigger: "blur" }],
        columnPath: [{ required: true, message: "请输入栏目路径", trigger: "blur" }],
        columnSort: [
          { required: true, message: "请输入栏目路径", trigger: "blur" },
          { type: "number", message: "排序必须为数字值" },
        ],
        columnKeyword: [
          { required: true, message: "请输入至少一个关键字", trigger: "blur" },
        ],
        columnType: [
          { required: true, message: "请选择栏目类型", trigger: "blur" },
        ],
        columnState: [
          { required: true, message: "请选择栏目状态", trigger: "blur" }
        ],
        columnIntroduction: [
          { required: true, message: "请添加栏目简介", trigger: "blur" }
        ]
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return false;
        this.$confirm("确认添加该栏目？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.ruleForm.columnState = this.ruleForm.columnState == "不显示" ? 0 : 1;
            this.ruleForm.columnFatherId = 0
            let { meta: { status, msg } } = await this.$http.getAddColumn(this.ruleForm)
            if (status == 200) {
              this.$message({
                type: "success",
                message: msg,
              });
              this.$router.push("/column")
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "添加失败",
            });
          });
      });
    },
    cancel() {
      this.$router.push("/column")
    },
  },
};
</script>

<style scoped lang="less">
.addBox {
  // padding: 0 250px;
  width: 550px;
  margin-left: 150px;
}
.el-form-item__label {
  width: 200px !important;
}
.btn {
  margin-left: 300px;
  margin-top: 50px;
}
</style>
